<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #9eaeb7;
        }

        #biao {
            width: 500px;
            height: 300px;
            border-radius: 2px;
            border: 1px solid;
            background-color: #b1d0e0;
            margin-left: 400px;
            position: relative;
        }

        label {
            /* background-color: red; */
            font-size: 14px;
            line-height: 14px;
        }

        span {
            font-size: 14px;
            line-height: 14px;
        }

        input {
            width: 217px;
        }
    </style>
</head>

<body>
    <form action="" id="biao" method="post">
        <label for="">账号</label>
        <input type="text" id="idcard" placeholder="只能使用数字、字母、下划线、横杠 必须以字母开头">
        <span id="pan1"></span><br />

        <label for="">昵称</label>
        <input type="text" id="username">
        <span id="pan2"></span><br />

        <label for="">电子邮件</label>
        <input type="text" id="mail">
        <span id="pan3"></span><br />

        <label for="">身份证</label>
        <input type="text" id="Card">
        <span id="pan4"></span><br />

        <label for="">手机号码</label>
        <input type="text" id="phone">
        <span id="pan5"></span><br />

        <label for="">生日</label>
        <input type="text" id="birthday">
        <span id="pan6"></span><br />

        <label for="">密码</label>
        <input type="text" id="password">
        <span id="pan7"></span><br />

        <label for="">确认密码</label>
        <input type="text" id="repassword">
        <span id="pan8"></span><br />

        <input type="checkbox" name="" id="checks">
        <span id="mian">十天免登录</span><br />

        <button id="sure">确定</button> <button id="clear">清空</button>
    </form>

</body>

</html>
<script>
    var idCard = document.getElementById("idcard"); //用户名
    var userName = document.getElementById("username") //昵称
    var email = document.getElementById("mail") //邮箱
    var Card = document.getElementById("Card") //身份证
    var Phone = document.getElementById("phone") //手机
    var Bty = document.getElementById("birthday") //生日
    var Psd = document.getElementById("password") //密码
    var Rpsd = document.getElementById("repassword") //确认密码
    //用户名
    idcard.onblur = function () {
        var regIdcard = /^[a-zA-Z][\w-]{5,19}$/
        // console.log(regIdcard.test(idCard.value))
        if (idCard.value !== '') {
            if (regIdcard.test(idCard.value)) {
                pan1.innerHTML = "用户名正确"
                pan1.style.color = "green"
            } else {
                pan1.innerHTML = "用户名错误，请重试"
                pan1.style.color = "red"
                idCard.value = ""
            }
        } else {
            pan1.innerHTML = "用户名不能为空"
            idCard.value = ""
        }
    }
    //昵称
    username.onblur = function () {
        var regUserName = /^[\u4e00-\u9fa5]{3,6}$/
        if (userName.value !== '') {
            if (regUserName.test(userName.value)) {
                pan2.innerHTML = "昵称正确"
                pan2.style.color = "green"
            } else {
                pan2.innerHTML = "昵称错误，请重试"
                pan2.style.color = "red"
                userName.value = ""
            }
        } else {
            pan2.innerHTML = "昵称不能为空"
            userName.value = ""
        }
    }
    //email
    mail.onblur = function () {
        var regmail = /^[\w]{5,12}@163\.(com|cn|net)$/
        if (mail.value !== '') {
            if (regmail.test(mail.value)) {
                pan3.innerHTML = "邮箱正确"
                pan3.style.color = "green"
            } else {
                pan3.innerHTML = "邮箱错误，请重试"
                pan3.style.color = "red"
                email.value = ""
            }
        } else {
            pan3.innerHTML = "邮箱不能为空"
            email.value = ""
        }
    }
    //身份证
    Card.onblur = function () {
        var regCard = /^\d{17}(\d|(X|x))/
        if (Card.value !== '') {
            if (regCard.test(Card.value)) {
                pan4.innerHTML = "身份证正确"
                pan4.style.color = "green"
            } else {
                pan4.innerHTML = "身份证错误，请重试"
                pan4.style.color = "red"
                Card.value = ""
            }
        } else {
            pan4.innerHTML = "身份证不能为空"
            Card.value = ""
        }
    }
    //手机
    Phone.onblur = function () {
        var regPhone = /^1(3|4|5|6|7|8)\d{9}$/
        if (Phone.value !== '') {
            if (regPhone.test(Phone.value)) {
                pan5.innerHTML = "手机正确"
                pan5.style.color = "green"
            } else {
                pan5.innerHTML = "手机错误，请重试"
                pan5.style.color = "red"
                Phone.value = ""
            }
        } else {
            pan5.innerHTML = "手机不能为空"
            Phone.value = ""
        }
    }
    //生日
    Bty.onblur = function () {
        var regBty = /^\d{4}(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/
        if (Bty.value !== '') {
            if (regBty.test(Bty.value)) {
                pan6.innerHTML = "生日正确"
                pan6.style.color = "green"
            } else {
                pan6.innerHTML = "生日错误，请重试"
                pan6.style.color = "red"
                Bty.value = ""
            }
        } else {
            pan2.innerHTML = "生日不能为空"
            Bty.value = ""
        }
    }
    //密码
    Psd.onblur = function () {
        var regPsd = /[^ ].{3,20}$/
        if (Psd.value !== '') {
            if (regPsd.test(Psd.value)) {
                pan7.innerHTML = "密码正确"
                pan7.style.color = "green"
            } else {
                pan7.innerHTML = "密码错误，请重试"
                pan7.style.color = "red"
                Psd.value = ""
            }
        } else {
            pan7.innerHTML = "密码不能为空"
            Psd.value = ""
        }
    }
    //确认密码
    Rpsd.onblur = function () {
        var regRpsd = /[^ ].{3,20}$/
        if (Rpsd.value !== '') {
            if (regRpsd.test(Rpsd.value) && Rpsd.value === Psd.value) {
                pan8.innerHTML = "确认密码正确"
                pan8.style.color = "green"
                // console.log(regRpsd.test(Rpsd.value) && Rpsd.value === Psd.value)
            } else {
                pan8.innerHTML = "确认密码错误，请重试"
                pan8.style.color = "red"
                Rpsd.value = ""
            }
        } else {
            pan8.innerHTML = "确认密码不能为空"
            Rpsd.value = ""
        }
    }
    //提交按钮
    sure.onclick =function(){
        if(regIdcard.test(idCard.value)===true&&regUserName.test(userName.value)===true&&regmail.test(mail.value)===true&&regmail.test(mail.value)===true&&regCard.test(Card.value)===true&&regPhone.test(Phone.value)===true&&regBty.test(Bty.value)===true&&regPsd.test(Psd.value)===true&&(regRpsd.test(Rpsd.value) && Rpsd.value === Psd.value)===true){
            alert("提交成功")
        }else{
            alert("提交失败，请检查")
        }
    }
    clear.onclick=function(){
        idCard.value = ""
        userName.value = ""
        email.value = ""
        Card.value = ""
        Phone.value = ""
        Bty.value = ""
        Psd.value = ""
        Rpsd.value = ""
    }
</script>